<template>
       <div id="blog_indexpage"  class="transition" >
          <blogheader/>
          <div id="shaow_left" class="transition_left"></div>
          <div id="shaow_right" class="transition_right"></div>
          <div id="index_intro">

             <ul>
                 <li class="first_li"> <h2 id="welcome">Welcome  to   my  blog</h2></li>
                <li>探索计算机的奥秘是我们的乐趣,也是我们奋不顾身的理由
                  我们是开发者,我们是程序员,一群与众不同的人!
                </li>
                 <li class="third_btn">
                   <el-button @click="goToRepository" type="warning" round size="medium"><span style="color: rebeccapurple" class="iconfont icon-tushuguan"></span>个人图书馆</el-button>
                   <el-button @click="goblog()" type="danger" round size="medium "><span class="iconfont icon-boke"></span>进入博客</el-button>
                 </li>

             </ul>

          </div>

       </div>
</template>

<script>
  import  blogheader from '../components/blogheader'
  export default {
    name: 'indexpage.vue',
    components:{
       blogheader
    },
    methods:{
      goToRepository(){
        window.open('http://blog.runtimeexception.cn/resource')
         //location.href 在当前的窗口打开
         //    window.open  在新窗口打开页面。
      },
      goblog(){
         this.$router.push('/blog')
      }
    }
  }
</script>

<style scoped>
     #blog_indexpage{
       position: absolute;
       width: 100%;
        height: 100%;
        background-image: url("../assets/bg_index.jpg");
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
       /*z-index: 900;*/
       z-index: 1100;
     }

     #index_intro{
        position: absolute;
        z-index: 80;
        width: 50%;
       height: 50%;
       left: 0;
       right: 0;
       top:0;
       bottom: 0;
       margin: auto;
       /*background-color: rebeccapurple;*/
     }



     @keyframes  index_left {
        from{
          position: absolute;
          z-index: 100;
          height: 100%;
          width: 50%;
          top: 0;
          background-color: rebeccapurple;
          opacity: 0.5;
        }
         to{
           transform: translateX(-200%);
         }
     }

     #shaow_left{
       animation-name:index_left ;
       animation-duration: 2s;
       animation-timing-function: ease;
     }

     @keyframes index_right{
       from {
         position: absolute;
         z-index: 100;
         height: 100%;
         width: 50%;
         right: 0;
         top: 0;
         background-color: rebeccapurple;
         opacity: 0.5;
       }
       to{
         transform: translateX(200%);
         /*transition: 1s linear;*/
       }
     }
     #shaow_right{
          animation-name:index_right ;
         animation-duration: 2s;
         animation-timing-function: ease;
     }

     #index_intro  ul{
          list-style: none;
          width: 100%;
          height: 100%;
          text-align: center;
          font-weight: bolder;
       font-size: 16px;
       font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

     }

     #index_intro  ul li{
          width: 100%;
          height: 30%;
         text-align: center;
          /*line-height: 30%;*/
           /*border-bottom: 1px solid red;*/
     }



     #index_intro  ul  .first_li{
          position: relative;
       text-align: center;
       color: #FFFFFF;

     }
     #index_intro  ul li:nth-of-type(2){
        color: #CCCCCC;
        font-size: 26px;

     }
     #welcome{
          left: 30%;
          position: absolute;
          bottom: 0;

     }

     #index_intro ul .third_btn .el-button {
       height: 50%;
       width: 40%;
       margin-left: 5%;
       /*background-color:rgba(0,0,0,0);*/
     }




</style>
